import React, { useCallback, useEffect } from 'react'
import {connect} from 'react-redux'

import Player from './index'
import { receiveSongList, togglePlayStatusEnd } from '../../redux/actions'

const PlayerContainer = ({PlaySongsList, setPlayList, currentSongMp3, currentSongDetail, receiveSongListFun, currentTime, togglePlayStatusFun, onEnd}) => {
  console.log(PlaySongsList, 'PlaySongsList');

  useEffect(() => {
    // setPlayList()
    let ids = ['65800','65761','65528','28563317']
    receiveSongListFun(ids)
  }, [])

  return <div>
    <Player
      resolveUrl={currentSongMp3.url || ''}
      streamUrl={currentSongMp3.url || ''}
      clientId={currentSongMp3.id}
      trackTitle={currentSongDetail.name || ''}
      onStopTrack={() => togglePlayStatusFun(!onEnd)}
      currentSongDetail={currentSongDetail}
      className="playerContaniner"
      songsList={PlaySongsList} />
  </div>
}

const mapPropsState = (state) => {
  // console.log(state, 'state');
  return {
    PlaySongsList: state.currentDoingInfo.currentSongsList,
    currentSongMp3: state.currentDoingInfo.currentSongMp3,
    currentSongDetail: state.currentDoingInfo.currentSongDetail,
    onEnd: state.currentDoingInfo.onEnd
  }
}
const mapPropsDispatch = (dispatch) => {
  return {
    // setPlayList: (data) => {
    //   dispatch(setListAction(data))
    // },
    receiveSongListFun: (data) => {
      dispatch(receiveSongList(data))
    },
    togglePlayStatusFun: (data) => {
      console.log(data, 'data onend')
      dispatch(togglePlayStatusEnd(data))
    }
  }
    
}
export default connect(mapPropsState, mapPropsDispatch)(PlayerContainer)